<template>
    <div class="leftNavContainers">
        <div class="contentBoxs-leftContent">
            <el-tree :data="leftArr" node-key="id" ref="treeList" default-expand-all highlight-current :expand-on-click-node="false"
                @node-click="handleNodeClick" 
                :default-checked-keys="defaultCheckedKeys">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span
                        :class="data.level == 1 ? 'oneSpan' : data.level == 2 ? 'twoSpan' : data.level == 3 ? 'threeSpan' : 'forSpan'">{{
                node.label }}
                        <!-- <span class="numSpan">({{ data.num }})</span> -->
                    </span>

                </span>
            </el-tree>

        </div>
    </div>
</template>

<script>

export default {
    name: 'leftNav',
    props: {
        leftArr: {
            type: Array,
            default: []
        }
    },
    components: {

    },
    data() {
        return {
            defaultCheckedKeys: []

        };
    },
    mounted() {
        const { state } = this.$store;
        this.setDefaultCheckedNode()

    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        handleNodeClick(data, node, component) {
            // 处理节点点击事件
            //console.log('节点被点击', data);
            this.$emit('navClick', data)
        },
        setDefaultCheckedNode() {
            const firstNode = this.leftArr[0];
            if (firstNode) {
                this.$refs.treeList.setCurrentKey(firstNode.children[0].id); //默认选中第一条
                this.handleNodeClick(firstNode.children[0]); //同时调用树点击事件

            }
        }

    },
};
</script>

<style scoped lang="scss">
.leftNavContainers {
    width: 100%;
}

::v-deep .el-tree-node__content {
    padding: 6px 0px;
    padding-right: 4px;
    height: auto;
}

.custom-tree-node {
    line-height: 20px;
    display: block;
    word-break: break-all;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        word-break: break-all;
    }
}

.oneSpan {
    font-size: 16px;
}

.twoSpan {
    font-size: 15px;
}

.threeSpan {
    font-size: 14px;
}

.fourSpan {
    font-size: 12px;
}

.numSpan {
    font-size: 14px !important;
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: #3a62d7 !important;
    color: #fff;
}
</style>
